<template>
  <el-col :xs="24" :md="12" :lg="8">
    <el-row style="padding-left: 1px;">
      <el-col :lg="24" class="border-content">
        <label class="labeltitle" :style="'width:' + element.options.labelwidth + 'px;'" :class="{ required: element.options.required === true }">
          {{ element.title }}
        </label>
        <div :style="'margin-left: ' + element.options.labelwidth + 'px;'">
          <template v-if="element.type === 'input'">
            <el-input :placeholder="element.options.placeholder" v-model="modelvalue" :show-password="element.options.password" :clearable="element.options.clearable" :maxlength="element.options.dataLength" :prefix="element.options.prefix" :suffix="element.options.suffix" :suffix-icon="element.options.suffixicon" :prefix-icon="element.options.prefixicon" :disabled="element.options.disabled" :show-word-limit="element.options.showwordlimit" :size="element.options.butsize"></el-input>
          </template>
          <template v-else-if="element.type === 'textarea'">
            <el-input :placeholder="element.options.placeholder" v-model="modelvalue" :show-password="element.options.password" :clearable="element.options.clearable" :maxlength="element.options.dataLength" :prefix="element.options.prefix" :suffix="element.options.suffix" :suffix-icon="element.options.suffixicon" :prefix-icon="element.options.prefixicon" :disabled="element.options.disabled" :show-word-limit="element.options.showwordlimit" :size="element.options.butsize"></el-input>
            <!-- <textarea
              :maxlength="element.options.dataLength"
              class="form-control multy_textarea"
              :placeholder="element.options.placeholder"
              :rows="element.options.rows"
              v-model="element.options.defaultValue"
            ></textarea> -->
          </template>
          <template v-else-if="element.type === 'switch'">
            <el-select v-model="modelvalue" placeholder="请选择" style="width: 100%;">
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="0"> </el-option>
            </el-select>
          </template>
          <template v-else-if="element.type === 'slider'">
            <el-slider v-model="modelvalue" range :max="element.options.max" :min="element.options.min" :step="element.options.step">
            </el-slider>
          </template>
          <template v-else-if="element.type === 'colorpicker'">
            <el-color-picker v-model="modelvalue" :size="element.options.butsize">
            </el-color-picker>
          </template>

          <template v-else-if="element.type === 'radio'">
            <el-select v-model="modelvalue" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in element.options.options" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </template>
          <template v-else-if="element.type === 'checkbox'">
            <el-select v-model="modelvalue" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in element.options.options" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </template>
          <template v-else-if="element.type === 'time'">
            <el-date-picker v-model="modelvalue" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" :picker-options="element.options.placeholder">
            </el-date-picker>
          </template>
          <template v-else-if="element.type === 'date'">
            <template v-if="element.options.modeltype === 'date'">
              <el-date-picker v-model="modelvalue" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="element.options.placeholder">
              </el-date-picker>
            </template>
            <template v-else-if="element.options.modeltype === 'month'">
              <el-date-picker v-model="modelvalue" type="month" align="right" unlink-panels style="width: 100%;" value-format="yyyy-MM" :picker-options="element.options.placeholder">
              </el-date-picker>
            </template>
            <template v-else-if="element.options.modeltype === 'week'">
              <el-date-picker v-model="modelvalue" type="week" align="right" unlink-panels style="width: 100%;" value-format="yyyy-MM" :picker-options="element.options.placeholder">
              </el-date-picker>
            </template>
            <template v-else-if="element.options.modeltype === 'range'">
              <el-date-picker v-model="modelvalue" type="date" value-format="yyyy-MM-dd" :picker-options="element.options.placeholder">
              </el-date-picker>
            </template>
          </template>
          <template v-else-if="element.type === 'select'">
            <el-select v-model="modelvalue" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in element.options.options" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </template>
          <template v-else-if="element.type === 'rate'">
            <el-rate v-model="modelvalue"></el-rate>
          </template>
          <template v-else-if="element.type === 'inputnumber'">
            <el-input-number v-model="modelvalue" :min="element.options.min" :max="element.options.max" :label="element.options.describe" :step="element.options.step" :precision="element.options.precision"></el-input-number>
          </template>
          <template v-else-if="element.type === 'timepicker'">
            <el-time-picker is-range v-model="modelvalue" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
            </el-time-picker>
          </template>
          <template v-else-if="element.type === 'editor'">
            <el-input :placeholder="element.options.placeholder" v-model="modelvalue" />
          </template>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
export default {
  name: 'QueryFormItem',
  props: ['element', 'index', 'data', 'modelProperty'],
  data () {
    return { modelvalue: this.modelProperty }
  },
  methods: {},
  watch: {
    modelvalue (val) {
      this.$emit('update:modelProperty', val)
    }
  }
}
</script>
<style scoped>
.hiddenoverflow {
  overflow: hidden;
}

.ant-tabs-tabpane {
  border-bottom: 1px solid #ccc;
}
.ant-tabs-bar {
  margin-bottom: 5px;
}
.el-radio-group {
  line-height: 32px;
}
.form-control,
.single-line {
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
}

.required:before {
  content: '*';
  color: #c80000;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 2px;
  margin-left: -9px;
}
.label-name.required:before {
  top: auto;
  margin-top: 2px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
  background-color: #fff;
  background-image: none;
  color: inherit;
  display: block;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
  border-radius: 0;
}
.el-input__suffix {
  right: 0px;
  line-height: 32px;
}

.el-switch__label * {
  font-size: 12px;
}
.border-title {
  height: 42px;
  line-height: 42px;
  padding-left: 15px;

  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  height: 42px;
  padding: 4px 15px;
}

.border-mult .border-content {
  height: auto;
  border-bottom: none;
}

.border-mult {
  background-color: #f5f5f5;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
.labeltitle {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  /* padding: 0 12px 0 0; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal;
}
</style>
<style scoped>
.detail-title {
  width: 100%;
  padding-left: 8px;
  height: 35px;
  line-height: 35px;
  background-color: #eaeaea;
  padding-right: 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.nav-tabs-link .fa-caret-square-o-right {
  font-size: 14px;
  color: #990000;
}
span.form_info {
  padding-left: 2px;
  font-weight: 600;
  color: #990000;
}
.nav-tabs-link a.arrow_telescopic.shrink {
  background-size: 16px 16px;
}
.nav-tabs-link a.arrow_telescopic {
  float: right;
  display: block;
  width: 34px;
  height: 34px;
}
.label-name {
  white-space: nowrap;
  line-height: 0;
  margin: 0;
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid transparent;
  display: block;
  cursor: pointer;
  text-align: center;
  margin-right: 1px;
  height: 31px;
}

.label-name .el-radio {
  line-height: 1;
}
.column-content {
  text-align: center;
  line-height: 42px;
  width: 100%;
  margin-bottom: 5px;
}
.detail-column {
  padding: 0;
  min-height: 60px;
  float: left;
  border-bottom: 1px solid transparent;
  border-right: 1px solid #ccc;
  border-left: none;
  position: relative;
}

.detail-column.active {
  background: #d3e2f1 !important;
}
.detail-column.active .label-name {
  background: #d3e2f1 !important;
}
.el-row.el-row--flex {
  border-top: 1px solid #ccc;
}

.layermend {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  font-weight: 400;
  background: 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.layermend::after,
.layermend::before {
  position: absolute;
  right: 5px;
  top: 14px;
  content: '';
  width: 15px;
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 3px;
}
.layermend::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.el-card .el-card__body {
  padding: 0px;
  height: 400px;
  overflow-y: auto;
}
</style>
